import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, Alert} from 'react-native';
import {
  Colors,
  View,
  Text,
  ColorPicker,
  ColorInfo,
  Button
} from 'react-native-ui-lib';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {TestCase, TestSuite} from '@rnoh/testerino';

interface State {
  color: string;
  textColor?: string;
  customColors: string[];
  paletteChange: boolean;
  backgroundColor: string;
  showPicker: boolean;
}

const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
// prettier-ignore
const colors = [
  '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
];

class ColorPickerScreen extends Component<{}, State> {
  state: State = {
    color: INITIAL_COLOR,
    textColor: Colors.$textDefaultLight,
    customColors: [],
    paletteChange: false,
    backgroundColor: Colors.$backgroundDefault,
    showPicker: false,
  };

  onDismiss = () => {
    console.log(`screen onDismiss`);
  };

  onSubmit = (color: string, textColor: string) => {
    const {customColors} = this.state;
    customColors.push(color);
    this.setState({
      color,
      textColor,
      customColors: _.clone(customColors),
      paletteChange: false,
    });
  };

  onValueChange = (value: string, colorInfo: ColorInfo) => {
    this.setState({
      color: value,
      textColor: colorInfo?.tintColor,
      paletteChange: false,
    });
  };

  render() {
    const {color, customColors, paletteChange} =
      this.state;
    const pickerValue = !paletteChange ? color || INITIAL_COLOR : undefined;

    return (
      <TestSuite name="ColorPicker组件">
        <TestCase itShould="设置 animatedIndex:1, backgroundColor:green">
          <View>
            <ColorPicker
              initialColor={color}
              colors={colors}
              onDismiss={this.onDismiss}
              onSubmit={this.onSubmit}
              value={pickerValue}
              animatedIndex={1}
              backgroundColor='green'
              accessibilityLabels={{
                addButton: "add color",
                dismissButton: "dismissButton",
                doneButton: "doneButton",
                input: "input content"
              }}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 colors:[ #FF0000, #FFFF00, #FF00FF], accessibilityLabels">
          <View>
            <ColorPicker
              initialColor={color}
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
              onDismiss={this.onDismiss}
              onSubmit={this.onSubmit}
              value={pickerValue}
              accessibilityLabels={{
                addButton: "add color",
                dismissButton: "dismissButton",
                doneButton: "doneButton",
                input: "input content"
              }}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 value:#FF0000, testID">
          <View>
            <ColorPicker
              testID="colorPicker"
              initialColor={color}
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
              value={'#FF0000'}
            />
            <Button
              onPress={()=>{
                Alert.alert("testID: colorPicker")
              }}>
              <Text white>testID</Text>
            </Button>
          </View>
        </TestCase>
        <TestCase itShould="设置 onValueChange">
          <View>
            <ColorPicker
              initialColor={color}
              colors={customColors}
              onDismiss={this.onDismiss}
              onSubmit={this.onSubmit}
              onValueChange={(value: string, colorInfo: ColorInfo) => {
                Alert.alert(`onValueChange color: ${value}`)
                this.setState({
                  color: value,
                  textColor: colorInfo?.tintColor,
                  paletteChange: false,
                });
              }}
              value={pickerValue}
            />
            <Text text60 margin-10 style={{color}}>
              Selected Color: {color}
            </Text>
          </View>
        </TestCase>
        
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.$backgroundNeutralLight,
  },
});

export default gestureHandlerRootHOC(ColorPickerScreen);
